<template>
  <div>
    <el-form
      :model="Roomfrom"
      :rules="Roomriles"
      ref="Roomfrom"
      label-width="100px"
      class="demo-Roomfrom"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="选择房型" prop="houseId">
            <el-select v-model="Roomfrom.houseId" placeholder="请选择">
              <el-option
                v-for="item in houselist"
                :key="item.id"
                :label="item.houseName"
                :value="item.id"
              >
              </el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="房号" prop="roomNumber">
            <el-input v-model="Roomfrom.roomNumber"></el-input> </el-form-item
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="排序" prop="roomSort">
            <el-input v-model="Roomfrom.roomSort"></el-input> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="备注">
            <el-input v-model="Roomfrom.roomRemark"></el-input> </el-form-item
        ></el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { addroom, gethouse } from "@/api/room";
export default {
  data() {
    return {
      houselist: [],
      Roomfrom: {
        houseId: "",
        roomSort: "",
        roomNumber: "",
        roomRemark: "",
        roomState: 1,
        houseState: 1,
      },
      Roomriles: {
        houseId: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        roomSort: [{ required: true, message: "请选择房型", trigger: "blur" }],
        roomNumber: [
          { required: true, message: "请选择房型", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    AddRoom() {
      this.$refs.Roomfrom.validate((valid) => {
        if (valid) {
          addroom(this.from).then((res) => {
            if (res.data) {
              this.$message.success("添加成功");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    gethouse() {
      gethouse().then((res) => {
        this.houselist = res.data;
      });
    },
  },
  created() {
    this.gethouse();
  },
};
</script>
<style>
</style>